/*
 * Metro UI CSS
 * (c) 2012-2013 by Sergey Pimenov
 * Licensed under the MIT License and Commercial
 *
 * Responsive-767.less
 *
 */

/* Landscape phone to portrait tablet */
@import "routines.less";

@tileSmall:             120px;
@tileLarge:             250px;
@tileMargin:            5px;
@tileDouble:            @tileSmall * 2 + @tileMargin * 2;
@tileTriple:            @tileSmall * 3 + @tileMargin * 4;
@tileQuadro:            @tileSmall * 4 + @tileMargin * 6;


@media (max-width: 767px) {
    body {
        padding-right: 10px;
        padding-left: 10px !important; //TODO найти и уничтожить
    }

    .metrouicss {

    [class*="span"], .hero-unit {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    [class*="offset"], .hero-unit {
        margin-left: 0;
    }

    table {
        thead {
            tr {
                th {
                    font-size: 9pt;
                }
            }
        }

        tbody {
            tr {
                td {
                    font-size: 10pt;
                }
            }
        }
    }

    h1 {font-size: 30pt;}
    h2 {font-size: 16pt;}

    .nav-bar {
        .nav-bar-inner {
            .pull-menu {
                display: inline-block;
            }

            & > .divider {
                //display: none;
                float: none !important;
            }

            .element {
                float: none;
            }

            & > ul.menu {
                display: none;
                float: none;
                margin: 5px;

                & > li {
                    display: block;
                    float: none;
                    width: 100%;
                    margin-left: 0;
                    padding-left: 5px;
                    //border-bottom: 1px #ccc solid;

                    a {
                        display: block;
                        float: none;
                    }

                    .dropdown-menu {
                        position: relative;
                        width: 100%;
                        border: 0;
                    }
                }
            }

            [data-role=dropdown] {
                margin-right: 20px !important;
                & > a {
                    cursor: pointer;
                    &:before {
                        position: absolute;
                        content: "\203A";
                        display: block;
                        font-size: 1.4em;
                        left: 100%;
                        margin-left: -10px;
                        top: 8px;
                        .rotate(90deg);
                    }
                }
            }

        }
    }

    .page-control {
        position: relative;
    }

    .page-control .menu-pull {
        background-image: url("");
        display: block;
        width: 24px;
        height: 24px;
        float: right;
        margin-top: 10px;
        margin-right: 10px;
        cursor: pointer;
    }
    .page-control .menu-pull-bar {
        display: block;
        width: 100%;
        height: 44px;
        border: 1px solid #CCC;
        border-bottom: 0px;
        background-color: rgba(217, 217, 217, 0.16);
        padding: 10px 0px 10px 20px;
        color: #2D89EF;
    }
    .page-control ul {
        width: 100%;
        height: auto;
        margin: 0px;
        position: relative;
        padding: 0px 20px 10px 20px;
        border: 1px solid #CCC;
        border-bottom: 0px;
        border-top: 0px;
        display: none;
    }
    .page-control ul li {
        display: block;
        float: left;
        width: 100%;
        padding-left: 0;
        line-height: 32px;
        position: relative;
        height: auto;
    }
    .page-control ul li:first-child {
        margin-left: 0px;
    }
    .page-control ul li.active {
        border: 0px;
        background-color: rgba(0, 0, 0, 0);
    }
    .page-control ul li.active a {
        color: #1e1e1e;
    }
    .page-control ul li a {
        width: 100%;
        text-align: left;
    }
    .page-control ul li a:hover {
        background: #464646;
        color: #fff;
    }
    .page-control .frames {
        margin-top: 0px;
    }

    .tile {
        width: @tileSmall;
        height: @tileSmall;

        &.double {
            width: @tileDouble;
        }
        &.triple {
            width: @tileTriple;
        }
        &.quadro {
            width: @tileQuadro;
        }
        &.double-vertical {
            height: @tileDouble;
        }
        &.triple-vertical {
            height: @tileTriple;
        }
        &.quadro-vertical {
            height: @tileQuadro;
        }

    }

    .tile {
        .tile-content {
            padding: 5px 10px;
        }

        &.icon {
            & > .tile-content {
                & > img {
                    width: 48px;
                    height: 48px;
                    margin-left: -24px;
                    margin-top: -24px;
                }

                & > i {
                    margin-left: -24px;
                    font-size: 48px;
                }
            }
        }

        .brand, .tile-status {
            & > .badge {
                width: 26px;
                height: 28px;
                right: 0;
                font-size: 9pt;
            }

            & > .name {
                margin-left: 10px;
            }

            & > .icon {
                width: 24px;
                height: 24px;
                margin: 5px 10px;
            }

            & > img ~ .text {
                left: 40px;
                right: 40px;
                font-size: 8pt;
            }
        }
    }

    }
}
